<template>
  <view class="container">
    <!-- 头部 start -->
    <view class="head">
      <u-navbar
        :is-fixed="false"
        :border-bottom="false"
        :is-back="false"
        title="逸飞旅游"
        :background="{ background: 'transprent' }"
        title-color="#FFFFFF"
      ></u-navbar>
      <view style="padding: 0 30rpx 30rpx 30rpx">
        <u-search
          :action-style="{ color: '#fff' }"
          placeholder="请输入"
          v-model="keyword"
        ></u-search>
      </view>
      <image
        src="~@/static/images/home/swiper-background-1.png"
        class="head-bg"
      ></image>
      <swiper
        class="swiper-box"
        :indicator-dots="false"
        :autoplay="true"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view :url="item.url" hover-class="none" class="swiper-item">
            <image :src="item.img" class="banner"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 头部 end -->
    <view class="nav">
      <view class="nav-item" @click="$u.func.route('/pages/order/list')">
        <image
          src="@/static/images/home/n1.png"
          mode="widthFix"
          class="nav-item-img"
        ></image>
        <view class="nav-item-name">订单中心</view>
      </view>
      <!-- <view class="nav-item" @click="$u.func.route('/pages/order/list')">
        <image
          src="@/static/images/home/n2.png"
          mode="widthFix"
          class="nav-item-img"
        ></image>
        <view class="nav-item-name">退还押金</view>
      </view> -->
      <view class="nav-item" @click="openLogin">
        <image
          src="@/static/images/home/n3.png"
          mode="widthFix"
          class="nav-item-img"
        ></image>
        <view class="nav-item-name">会员注册</view>
      </view>
      <view class="nav-item" @click="openPhone">
        <image
          src="@/static/images/home/n5.png"
          mode="widthFix"
          class="nav-item-img"
        ></image>
        <view class="nav-item-name">联系我们</view>
      </view>
    </view>
    <view
      style="padding: 20rpx; background-color: #e54d42; margin: 25rpx"
      @click="openLogin"
    >
      <image
        style="width: 100%"
        src="@/static/images/2.png"
        mode="widthFix"
      ></image>
    </view>
    <goodsList></goodsList>
    <view class="news">
      <view hover-class="none" class="cell">
        <view class="ctitle">逸飞旅游服务公司</view>
      </view>
      <u-read-more :toggle="true" :show-height="200">
        <rich-text :nodes="content"></rich-text>
      </u-read-more>
    </view>
  </view>
</template>

<script>
import { calcDate } from "@/utils/date.js";
import { tokenTime } from "@/common/setting.js";
import goodsList from "@/components/goodsList/goodsList.vue";
export default {
  components: {
    goodsList,
  },
  data() {
    return {
      openid:'',
      keyword: "",
      bannerList: [
        {
          img: "https://yftourism.cn/images/20240828151431.jpg",
          url: "",
        },
        {
          img: "https://image.pingyuntech.com/9a8ae136-260b-434e-8e73-5d5f3f38c48e1111.jpg",
          url: "",
        },
      ],
      list: [
        {
          text: "18998983331",
        },
        {
          text: "17770140138",
        },
      ],
      show: false,
      content: `逸飞旅游服务公司，作为专注于水上漂流活动所需装备和服务的提供商，在旅游、户外探险及水上运动领域扮演着重要角色。以下是对漂流用品服务公司的一个综合介绍：
				<br/><br/>
				一、公司概况
				<br/>
				逸飞旅游服务有限公司拥有丰富的行业经验，为客户提供高质量的旅游用品、售后服务。
				<br/><br/>
				二、服务范围
				<br/>
				漂流装备：提供各类漂流水上玩具。这些装备通常具有耐磨、耐撞、耐高温、耐严寒、耐老化等特性，确保在复杂的水流环境中仍能保持良好的性能。
				<br/>
				
				定制服务：提供个性化的套餐服务，如根据客户要求配置不同的漂流装备。
				<br/>
				维修保养服务：为客户提供漂流装备的维修保养服务，确保装备在使用过程中始终保持最佳状态。
				<br/><br/>
				三、特色优势
				<br/>
				完善服务：提供从咨询、销售到售后服务的全链条服务，确保客户在整个过程中都能得到满意的体验。
				<br/>
				创新能力：不断添加新产品、以满足市场变化和客户需求的变化。
				<br/><br/>
				四、行业地位
				<br/>
				逸飞旅游服务公司在行业中通常占据重要地位，是推动水上漂流运动发展的重要力量。通过提供高质量的产品和服务，赢得了广大客户的信赖和好评，并在行业内树立了良好的口碑。`,
    };
  },
  onLoad() {
    
    if(!uni.getStorageSync('openid')){
      this.wxlogin()
		}else{
      this.openid=uni.getStorageSync('openid')
    }
    
    if (this.isLogin) {
      //this.refreshToken();
    }
  },
  onReachBottom() {},
  methods: {
    async wxlogin() {
				let that = this
				// 获取code
				var wxlogin = await wx.login()
				if (wxlogin.code) {
          this.$u.api.getOpenId({code:wxlogin.code}).then((res) => {
              this.openid=res.data.openid
              uni.setStorageSync('openid',this.openid)
          }).catch(() => {});
        }
    },
    // 定时检测token
    refreshToken() {
      let that = this;
      const token = uni.getStorageSync("token");
      this.$u.api
        .refreshToken(token.content, "000000")
        .then((res) => {
          this.$u.func
            .refreshToken(res)
            .then(() => {
              that.$u.func.login(res.data, "", true);
            })
            .catch(() => {});
        })
        .catch(() => {
          this.refreshLock = false;
        });
    },
    openList() {
      this.show = true;
    },
    openPhone(index) {
      uni.makePhoneCall({
        phoneNumber: this.list[index].text, //仅为示例
      });
    },
    openProfile() {
      if (this.isLogin) {
        this.$u.func.route("/pages/user/profile");
      } else {
        uni.showToast({
          icon: "none",
          title: "请先登录/注册",
        });
      }
    },
    openLogin() {
      if (this.isLogin) {
        uni.showToast({
          icon: "none",
          title: "您已登录,已领取 ~",
        });
      } else {
        this.$u.func.route("/pages/login/login");
      }
    },
    noOpen() {
      uni.showToast({
        icon: "none",
        title: "敬请期待",
      });
    },
  },
};
</script>

<style lang="scss">
.login_btn {
  width: 80%;
  height: 2.5rem;
  background: linear-gradient(-40deg, #03a9f4 0%, #03a9f4 100%);
  box-shadow: 0px 3px 8px #03a9f4;
  border-radius: 25px;
  text-align: center;
  line-height: 2.5rem;
  color: #ffffff;
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin: 50rpx auto;
}
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;
}

.head {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.head-bg {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 750rpx;
  height: 400rpx;
}

.nav-wrap {
  width: 100%;
  padding: 0 22rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  .picker-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 32rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;

    .arrow {
      margin-left: 10rpx;
    }
  }

  .rider {
    flex-shrink: 0;
    width: 131rpx;
    height: auto;
  }

  .search-input {
    width: 300rpx;
    height: 50rpx;
  }

  .tool {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .icon {
      height: auto;
    }

    .search-icon {
      width: 40rpx;
      margin-right: 34rpx;
    }

    .message-icon {
      width: 32rpx;
      margin-right: 27rpx;
    }

    .qr-icon {
      width: 37rpx;
    }
  }
}

.swiper-box {
  margin: 0rpx auto 0;
  width: 710rpx;
  height: 320rpx;
  .swiper-item {
    width: 100%;
    height: 100%;

    .banner {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}

.nav {
  margin: 30rpx 0;
  box-sizing: border-box;
  padding: 0 10rpx;
  display: flex;
  &-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 130rpx;

    &-img {
      width: 80rpx;
      height: 80rpx;
    }

    &-name {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #585b61;
    }
  }
}

.notice-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  margin: 0 20rpx;
  padding: 30rpx 20rpx;

  .img {
    width: 75rpx;
    height: auto;
    margin-right: 36rpx;
    margin-left: 10rpx;
  }

  .notice-info {
    flex: 1;

    .notice-cell:first-of-type {
      margin-bottom: 15rpx;
    }
  }

  .notice-cell {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #585b61;

    .icon {
      width: 63rpx;
      margin-right: 18rpx;
    }

    .text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}

.service-box {
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  margin: 30rpx 20rpx 0;
  padding: 0rpx 20rpx;

  .service-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #585b61;

    .img {
      width: 70rpx;
      height: auto;
    }
  }
}

.news {
  background: #ffffff;
  border-radius: 5rpx;
  margin: 20rpx 20rpx 60rpx;
  padding: 30rpx 20rpx;
  line-height: 50rpx;
  .cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .ctitle {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #585b61;
    }

    .more {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #a6abb5;
    }
  }

  .news-list {
    margin-top: 30rpx;

    .news-item {
      &:not(:last-of-type) {
        padding: 0 0 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1px solid #eeeeee;
      }

      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        flex: 1;
        height: 160rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .info {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #585b61;
          line-height: 36rpx;
        }

        .date {
          display: flex;
          align-items: center;

          .icon {
            width: 21rpx;
            height: 21rpx;
            margin-right: 9rpx;
          }

          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #a6abb5;
        }
      }

      .img {
        flex-shrink: 0;
        width: 252rpx;
        height: 160rpx;
        border-radius: 20rpx;
        background-color: #82848a;
      }
    }
  }
}
</style>
